<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>操作界面</TITLE>
    <meta charset="utf-8"/>
    <script src="/js/jquery-1.11.3.js"></script>
    <style>
        * {
            margin: 0px auto;
            pading: 0 auto;
            font-size: 20px;
            list-style: none;
            text-decoration: none;
        }

        .all {
            width: 100%;
            height: 100%;
            box-shadow: 0px 5px 15px #000;
            background:#ff4d4d;
        }

        .all .content {
            *float: left;
            border-right: 1px solid #00327e;
            display: inline-block;
            width: 100%;
            height: 760px;
            box-shadow: 0px 5px 15px #000;
        }

        .all .content .menu {
            padding: 0;
            width: 100%;
            height: 760px;
            list-style: none;
            height: auto;
        }

        .all .content .menu .item {
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid #e8e8e8;
            background: rgba(141, 203, 242, 0.3);
        }

        .all .content .menu .item:hover {
            color: #fff;
            background: rgba(121, 180, 248, 0.3);
        }

        /*.all .content .menu .cover {*/
        /*color: #62cfe6 !important;*/
        /*background: #79B4F8;*/
        /*}*/

        .all .content .menu .fb {
            font-weight: bold;
            font-size: 25px;
            color: #000;
            cursor: pointer;
        }

        .all .content .menu .citem {
            line-height: 35px;
            background: rgba(157, 206, 242, 0.3);
        }

        .all .content .menu .citem:hover {
            background: rgba(110, 195, 234, 0.3);
            color: #fff;
        }

        .all .content .menu .hide {
            display: none;
        }

        .bod {
            display: inline-block;
            *top: -50px;
            display: inline-block;
            width: 5px;
            height: 50px;
            background: #fff;
            float: right;
        }

    </style>
</HEAD>

<BODY>
<table border="0" height="100%" align="left">
    <tr>
        <!-- 作用：用于显示树菜单 -->
        <td width="15%" height="100%" align="left" valign="top" style="border-right: #999999 1px dashed;">
            <!-- 先写好内容框架 -->
            <div class="all" style="width: 14em;">
                <div class="content" id="left_bg">
                    <ul class="menu" id="ulMenu">
                        <li class="item fb">订单管理
                            <span></span>
                            <ul class="menu hide">
                                <a href="../order" target="myIframe">
                                    <li class="citem" id="a1" onclick="chcolor(1),setCookie(event)">订单管理</li>
                                </a>
                                <a href="../addOrder" target="myIframe">
                                    <li class="citem" id="a2" onclick="chcolor(2),setCookie(event)">订单录入</li>
                                </a>
                                <!--<li class="citem">xxxxxx</li>-->
                                <!--<li class="citem">xxxxxx</li>-->
                            </ul>
                        </li>
                        <li class="item fb">商品管理
                            <span></span>
                            <ul class="menu hide">
                                <a href="../addProduct" target="myIframe">
                                    <li class="citem" id="a3" onclick="chcolor(3),setCookie(event)">添加商品</li>
                                </a>
                                <a href="../product" target="myIframe">
                                    <li class="citem" id="a4" onclick="chcolor(4),setCookie(event)">商品列表</li>
                                </a>
                                <a href="../shopManagement"   target="myIframe">
                                    <li class="citem" id="a5" onclick="chcolor(5),setCookie(event)">门店管理</li>
                                </a>
                                <!--<li class="citem">xxxxxx</li>-->
                                <!--<li class="citem">xxxxxx</li>-->
                                <!--<li class="citem">xxxxxx</li>-->
                            </ul>
                        </li>
                        <!--<li class="item fb">新增功能1-->
                        <!--<span></span>-->
                        <!--<ul class="menu hide">-->
                        <!--<li class="citem">xxxxxx</li>-->
                        <!--<li class="citem">xxxxxx</li>-->
                        <!--<li class="citem">xxxxxx</li>-->
                        <!--<li class="citem">xxxxxx</li>-->
                        <!--</ul>-->
                        <!--</li>-->
                        <!--<li class="item fb">新增功能2-->
                        <!--<span></span>-->
                        <!--<ul class="menu hide">-->
                        <!--<li class="citem">xxxxxx</li>-->
                        <!--<li class="citem">xxxxxx</li>-->
                        <!--<li class="citem">xxxxxx</li>-->
                        <!--<li class="citem">xxxxxx</li>-->
                        <!--</ul>-->
                        <!--</li>-->
                    </ul>
                </div>
            </div>
        </td>
        <!-- 作用：用于显示树菜单对应的页面内容 -->
        <td width="85%" align="left" valign="top">
            <iframe id="myIframe" name="myIframe" frameborder="0" scrolling=auto width="100%" height="760px;"
                    src="/order"></iframe>
        </td>
    </tr>
</table>
<script type="text/javascript">
  function chcolor(ids)
  {
    for(var i=1;i<6;i++)
    {
      $("#a"+i).css({"color":"#fff","font-size":"16px","background":"rgba(157,206,242,0.3)"});
    }
    $("#a"+ids).css({"color":"#fa7600","font-size":"20px","background":"rgba(110,195,234,0.3)"});
  }
</script>
<script>
    $(function () {
        registMenu();
        var currentLink = getCookie("currentLink");
        if (currentLink != "") {
            $("#myIframe").attr("src", currentLink);
        }
      $("#ulMenu li").each(function(){
          var $li=$(this);
          $("a",$(this)).each(function(){
              if($(this).attr("href")==currentLink){
                  $li.click();
                  $("li",$(this)).click();
              }
          })
      })
    });

    function registMenu() {
        $(".item").click(function () {
            $(this).siblings().removeClass("cover").children("span").removeClass("bod").siblings().slideUp(200);
            $(this).addClass("cover").children("span").addClass("bod").siblings().slideDown(200);
        });
    }

    function setCookie(event) {
        event = event ? event : window.event;
        var obj = event.srcElement ? event.srcElement : event.target;
        var currentLink = $(obj).parent().attr("href");
        $("#myIframe").attr("src", currentLink);
        clearCookie("currentLink");
        addCookie("currentLink", currentLink);
    }
    function addCookie(name, value) {
        var cookieString = name + "=" + value;
        document.cookie = cookieString + ";path=/;";
    }
    function clearCookie(name) {
        var expires = new Date();
        expires.setTime(expires.getTime() - 1000);     //当前时间减去一秒,相当于立即过期(可以增减)
        document.cookie = name + "=v;path=/;expires=" + expires.toGMTString() + "";        //expires是对应过期时间的设置,不设这个值,cookie默认在关闭浏览器时失效
    }

    function getCookie(name) {
        var strCookie = document.cookie;
        var arrCookie = strCookie.split("; ");
        for (var i = 0; i < arrCookie.length; i++) {
            var arr = arrCookie[i].split("=");
            if (arr[0] == name) {
                return (arr[1]);
            } else {
                return "";
            }
        }
    }
</script>

</BODY>
</HTML>
